<template>
  <section class="extend">
    <section class="forms">
      <template v-for="(item, index) in subs_">
        <section :key="index" class="forms-form">
          <v-form :id="item.id" ref="form" :fields="item.fields" @change="change" />
          <div v-show="showRemove" class="remove" @click="remove(item)">
            <div class="icon">
              <i class="el-icon-close" />
            </div>
          </div>
          <div class="num">{{ index+1 }}</div>
        </section>
      </template>
    </section>
    <template v-if="subs_.length===0">
      <section class="empty" :class="{'disabled': disabled}">
        <div class="icon">
          <svg-icon icon-class="empty-icon" />
        </div>
      </section>
    </template>
    <template v-if="!disabled_">
      <section v-if="!disabled" class="footer">
        <template v-if="!disabled">
          <div class="add" @click="add('')">
            <i class="el-icon-plus" />
          </div>
        </template>
        <template v-else>
          <div class="add disabled">
            <i class="el-icon-plus" />
          </div>
        </template>
      </section>
    </template>
  </section>
</template>
<script>
import VForm from '@/components/CustomPage/form/index.vue'
import mixins from './../mixins'
import { deepClone, randomString } from '@/utils'
export default {
  name: 'VExtend',
  components: { VForm },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      subs_: [],
      fields: this.option.fields || [],
      disabled_: false,
      showRemove: true
    }
  },
  computed: {
    max() {
      return this.option.max || 50
    },
    initalize() {
      return this.option.initalize
    }
  },
  created() {
    this.init()
    this.disabled_ = this.option.disabled || false
    this.showRemove=this.option.showRemove!==undefined?this.option.showRemove : true
  },
  methods: {
    init() {
      this.subs_ = (this.value || []).map(a => {
        const fields = deepClone(this.fields)
        Object.keys(a).forEach(prop => {
          const value = a[prop]
          fields.forEach(a => {
            if (a.option.name === prop) {
              a.option.value = value
            }
          })
        })
        return {
          id: randomString(8),
          fields
        }
      })
    },

    add(obj) {
      const { max, fields } = this
      this.check().then(r => {
        if (r) {
          if (this.subs_.length < max) {
            this.subs_.push({
              id: randomString(8),
              fields: obj || fields
            })
            this.disabled_ = this.subs_.length >= max
          }
        }
      })
    },

    remove(v) {
      const t = this.subs_.findIndex(a => a.id === v.id)
      if (t !== -1) {
        this.subs_.splice(t, 1)
        this.disabled_ = this.subs_.length >= this.max
      }
      this.change()
    },
    clear(){
      this.subs_=[]
      this.change()
    },

    getValue() {
      const r = []
      if (this.$refs.form) {
        return this.$refs.form.reduce((a, child) => {
          return a.then(() => {
            if (child.getValue) {
              return Promise.resolve().then(() => child.getValue()).then(value => {
                r.push(value)
              })
            }
          })
        }, Promise.resolve()).then(() => r)
      } else {
        return Promise.resolve().then(() => r)
      }
    },

    setValue(value) {
      if (this.option.name === 'params') { // 如果是设置数据时，不执行初始化
        return
      }
      this.subs_ = (value || []).map(a => {
        const fields = deepClone(this.fields)
        Object.keys(a).forEach(prop => {
          const value = a[prop]
          fields.forEach(a => {
            if (a.option.name === prop) {
              a.option.value = value
            }
          })
        })
        return {
          id: randomString(8),
          fields
        }
      })
      if (this.subs_.length === 0 && this.initalize) {
        this.subs_ = [{
          id: randomString(8),
          fields: deepClone(this.fields)
        }]
      }
    },

    check() {
      let check = true
      if (this.$refs.form && this.$refs.form.length > 0) {
        return this.$refs.form.reduce((a, child) => {
          return a.then(() => {
            if (check && child.check) {
              return Promise.resolve().then(() => child.check()).then(result => {
                check = result
              })
            }
          })
        }, Promise.resolve()).then(() => check)
      } else {
        return Promise.resolve().then(() => check)
      }
    },

    change() {
      this.dispatch_event('filed-value-change', '')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/position.scss';
@import '@/styles/utility/shadow.scss';
@import '@/styles/utility/iconbtn.scss';
@import '@/styles/utility/center.scss';
.extend {
  .forms {
    padding-top: 10px;
    .forms-form {
      position: relative;
      padding-top: 10px;
      padding-bottom: 10px;
      .remove {
        width: 20px;
        line-height: 20px;
        text-align: center;
        @include iconbtn();
        display: none;
        @include absolute(-10px, 0, none, none);
        border-radius: 50%;
        @include boxShadow(2);
        background: $f9;
        z-index: 9;
        .icon {
          width: 20px;
          line-height: 20px;
        }
      }
      .num {
        width: 16px;
        line-height: 16px;
        text-align: center;
        background: $a1;
        color: $f9;
        font-size: 12px;
        border-radius: 50%;
        @include absolute(-8px, none, none, none);
        transition: all ease 0.3s;
      }
      &::before {
        content: '';
        display: block;
        @include absolute(100%, 0, none, none);
        width: 10px;
        height: 3px;
        background: $a1;
        margin-top: -1px;
        transition: all ease 0.3s;
      }
      &::after {
        content: '';
        display: block;
        @include absolute(100%, 15px, none, 15px);
        height: 0;
        border-top: 1px dashed $a1;
        transition: all ease 0.3s;
      }
      &:hover {
        .remove {
          display: block;
          &.disabled {
            display: none;
          }
        }
      }
      &.disabled {
        border-bottom: 1px dashed $f6;
        .remove {
          display: none;
        }
        .num {
          background: $f6;
          color: $f4;
        }
        &::after,
        &::before {
          background: $f6;
        }
      }
    }
    &::before {
      content: '';
      display: block;
      @include absolute(10px, 0, none, 0);
      height: 0;
      border-top: 1px dashed $a1;
    }
    &::after {
      content: '';
      display: block;
      @include absolute(10px, 0, none, none);
      width: 10px;
      height: 3px;
      background: $a1;
      margin-top: -1px;
    }
  }

  .empty {
    padding: 30px 0 30px 0;
    @include center();
    position: relative;
    border-bottom: 1px dashed $a1;
    transition: all ease 0.3s;
    .icon {
      width: 40px;
      line-height: 40px;
      border-radius: 50%;
      border: 1px solid $f6;
      background: $f8;
      text-align: center;
      font-size: 20px;
      color: $f3;
    }
    &::before {
      content: '';
      display: block;
      @include absolute(100%, none, none, 0);
      width: 10px;
      height: 3px;
      background: $a1;
      margin-top: -1px;
      transition: all ease 0.3s;
    }
    &::after {
      content: '';
      display: block;
      @include absolute(100%, 0, none, none);
      width: 10px;
      height: 3px;
      background: $a1;
      margin-top: -1px;
      transition: all ease 0.3s;
    }
    &.disabled {
      border-bottom: 1px dashed $f6;
      &::after,
      &::before {
        background: $f6;
      }
    }
  }
  .footer {
    @include center();
    position: relative;
    .add {
      width: 30px;
      line-height: 30px;
      text-align: center;
      margin-top: -15px;
      border-radius: 50%;
      @include boxShadow(2);
      background: $f9;
      cursor: pointer;
      transition: all ease 0.3s;
      z-index: 9;
      &:hover {
        @include boxShadow(5);
      }
      &.disabled {
        color: $f4;
        @include boxShadow(1);
        &:hover {
          cursor: not-allowed;
          @include boxShadow(1);
        }
      }
    }
    &::before {
      content: '';
      display: block;
      @include absolute(0, none, none, 0);
      width: 10px;
      height: 3px;
      background: $a1;
      margin-top: -1px;
      transition: all ease 0.3s;
    }
  }
}
</style>
